<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-size: 25px;
        }

        .box {
            display: flex;
        }

        /* 左布局 */
        .box .left {
            width: 500px;
            /* height: 700px; */
            background-color: #353942;
        }

        .box .left .top {
            width: 430px;
            display: flex;
            height: 113px;
            justify-items: center;
            border-bottom: 1px solid #494e52;
            margin-left: 35px;
        }

        .box .left .top .yuan {
            width: 68px;
            height: 68px;
            border: 1px solid transparent;
            border-radius: 50%;
            background-color: #d7d8dc;
            text-align: center;
            line-height: 68px;
            margin: auto 0;
            font-size: 34px;
        }

        .box .left .top .wenzi {
            color: #cad3da;
            line-height: 113px;
            margin-left: 10px;
        }

        .box .left .bottom {
            width: 448px;
            margin: 0 auto;

        }

        .box .left .bottom .ale {
            width: 100%;
            height: 100%;
            line-height: 160px;
            color: #cad3da;

            /* margin-bottom: 33px; */

        }

        .box .left .bottom div {
            width: 428px;
            height: 80px;
            line-height: 80px;
            color: #cad3da;
            padding-left: 20px;
            cursor: pointer;
            /* margin: 0 auto; */
        }

        .box .left .bottom div:hover {
            background-color: #157efb;
            color: #323731;
        }

        /* .box .left .bottom .touxiang .yuan{
            display: ;
        } */
        .box .left .bottom .das {
            background-color: #157efb;
            border-radius: 10px;
        }

        .box .left .bottom .dash {
            background-color: #ebedec;
            border-radius: 10px;
            color: #323731;
        }

        .box .left .bottom .touxiang {
            display: flex;
            height: 160px;
            border-bottom: 1px solid #494e52;
            margin-bottom: 10px;
            line-height: 160px;
        }

        .box .left .bottom .touxiang .yuan {
            width: 68px;
            height: 68px;
            border: 1px solid transparent;
            border-radius: 50%;
            background-color: #d7d8dc;
            text-align: center;
            line-height: 68px;
            margin: auto 0;
            background-image: url(./img/头像.webp);
            /* background-position:50%; */
            background-size: 100%;
        }

        /* 右布局 */
        .box .right {
            width: 100%;
            height: 114px;
            background-color: white;
        }

        .box .right .nav {
            display: flex;
            line-height: 114px;
        }

        .box .right .nav div {
            margin: auto 32px;
            text-align: center;
            line-height: 114px;
        }

        .box .right .nav input {
            width: 400px;
            height: 58px;
            margin: auto 0;
            border-radius: 10px;
            border: 0;
            outline: none;
            background-color: #f3f4f6;
            font-size: 30px;
            margin-left: 20px;
        }

        .box .right .main .biaoti {
            width: 100%;
            font-weight: 700;
            font-size: 40px;
            margin-left: 40px;
            height: 140px;
            line-height: 140px;
        }

        .box .right .main {
            display: flex;
            background-color: #f5f6fa;
            flex-wrap: wrap;
        }

        .box .right .main .box2 {
            width: 1146px;
            height: 814px;
            background-color: white;
            margin: 30px 40px;
            border-radius: 10px;
            font-weight: 700;
            border: 1px solid rgb(193, 186, 186);
        }

        .box .right .main .box2 .tubiao {
            margin: 60px auto;
        }

        .box .right .main .box2 .top-box {
            display: flex;
            justify-content: space-between;
            margin: 20px 40px;
            font-size: 40px;
        }

        .box .right .main .box2 .top-box .blue {
            color: blue;
        }

        .box .right .main .box2 table {
            margin: auto 45px;
        }

        .box .right .main .box2 table tr {
            width: 100%;
            
        }

        .box .right .main .box2 table tr th {
            width: 250px;
            text-align: center;
        }

        .box .right .main .box2 table tr .pro {
            min-width: 350px;
            text-align: left;
        }

        .box .right .main .box2 table tr .mo {
            min-width: 350px;
            text-align: right;
        }

        .box .right .main .box2 table tbody tr {
            height: 80px;
            text-align: center;
        }

        .box .right .main .box2 table tbody .first {
            text-align: left;
        }

        .box .right .main .box2 table tbody .last {
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">
            <div class="top">
                <div class="yuan">A</div>
                <div class="wenzi">AdminLTE 3</div>
            </div>
            <div class="bottom">
                <div class="touxiang">
                    <div class="yuan"></div>
                    <div class="ale">Alexander Pierce</div>
                </div>
                <div class="das">Dashboard</div>
                <div>Dashboard v1</div>
                <div>Dashboard v2</div>
                <div class="dash">Dashboard v3</div>
                <div>Widgets</div>
                <div>Charts</div>
                <div>Ul Elements</div>
                <div>Forms</div>
                <div>Tables</div>
                <div>Charts</div>
                <div>Ul Elements</div>
                <div>Forms</div>
                <div>Tables</div>
                <div>Tables</div>
            </div>
        </div>
        <div class="right">
            <div class="nav">
                <div>Home</div>
                <div>Contact</div>
                <input type="text" placeholder="  Search">

            </div>

            <div class="main">
                <div class="biaoti">Dashboard v3</div>
                <div class="box2">
                    <div class="top-box">
                        <div class="ti">Online Store Visitors</div>
                        <div class="blue">View Report</div>
                    </div>
                    <div class="tubiao" id="main" style="width:1045px;height:660px"></div>
                </div>
                <div class="box2">
                    <div class="top-box">
                        <div class="ti">Sales</div>
                        <div class="blue">View Report</div>
                    </div>
                    <div class="tubiao" id="main1" style="width:1045px;height:660px"></div>
                </div>
                <div class="box2">
                    <div class="top-box">
                        <div class="ti">Products</div>
                        <div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th class="pro">Product</th>
                                <th>Price</th>
                                <th>Sales</th>
                                <th class="mo">More</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="first"> 1</td>
                                <td>2</td>
                                <td>3</td>
                                <td class="last">搜索</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="box2">
                    <div class="top-box">
                        <div class="ti">Online Store Overview</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./渲染表格数据.js"></script>
<script>
    //box1
    //创建一个初始化的echart实例对象
    var e = echarts.init(document.querySelector('#main'))
    //绘制图形
    e.setOption({
        backgroundColor: '#ffffff',
        title: {
            text: '820'

        },
        legend: {
            data: ['This year', 'Last year']
        },
        xAxis: {
            data: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th']
        },
        yAxis: {
            name: 'Online Store Visitors',
        },
        series: [{
            type: 'line',
            name: 'This year',
            data: [125, 112, 56, 316, 205, 190, 188],
            lineStyle: {
                normal: {
                    color: '#FF6600',//颜色
                    //width: 15,//线宽
                    type: 'solid',//线型
                    opacity: 10//透明度0～10,0不显示
                }
            },
            itemStyle: {
                normal: {
                    //borderWidth:4,
                    color: '#fffff'
                },//
                emphasis: {
                    color: '#FFF',
                    borderWidth: 30,
                }//鼠标悬停样式
            },
            smooth: true
        }, {
            type: 'line',
            name: 'Last year',
            smooth: true,
            data: [211, 188, 159, 88, 288, 159, 222],
            markLine: {
                lineStyle: {
                    normal: {
                        type: 'solid',
                        color: '#ff9900'
                    },
                    emphasis: {
                        type: 'solid',
                        color: '#fff'
                    }
                }
            }
        }]
    })
</script>
<script>
    //box2
    //创建一个初始化的echart实例对象
    var e = echarts.init(document.querySelector('#main1'))
    //绘制图形
    e.setOption({
        backgroundColor: '#ffffff',
        title: {
            text: '$18,230.00',
            textStyle: {
                // sizi: '30px',
                color: 'black', //坐标的字体颜色
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: ['bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            data: ['This year', 'Last year']
        },
        calculable: true,
        xAxis: [{
            axisLine: {
                lineStyle: {
                    color: 'black', //坐标轴的颜色
                },
            },
            type: 'category',
            data: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEG']
        }],
        yAxis: [

            {

                type: 'value',
                name: 'Sales Over Time',
                min: 0,
                max: 100,

                axisLabel: {
                    textStyle: {
                        color: 'black', //坐标的字体颜色
                    },
                    formatter: '{value} '
                },
                axisLine: {
                    lineStyle: {
                        color: 'black', //坐标轴的颜色
                    },
                },

            }
        ],
        color: ['blue', 'gray'],
        series: [{
            name: 'This year',
            type: 'bar',
            data: [61, 27, 30, 54, 44, 34, 24],
        },
        {
            name: 'Last year',
            type: 'bar',
            data: [30, 46, 54, 44, 65, 45, 75],
        }
        ]

    })
</script>
<script>
    xuanran(data.list)
    function xuanran(data) {
        var str = data.map((item, index) => {
            return `<tr>
                        <td class="first">${item.name}</td>
                        <td>$${item.num}USD</td>
                        <td>${item.num}sold</td>
                        <td class="last">搜索</td>
                    </tr>`
        }).join('')
        document.querySelector(' .box .right .main .box2 table tbody').innerHTML = str
    }
</script>